<template>
  <el-form-item :prop="prop" :label="label" :rules="rulesList">
    <el-radio-group v-model="text" v-bind="$attrs" v-on="$listeners">
      <el-radio v-for="(item, index) in options" :key="index" :label="item[optionKeyValue[1]]" :disabled="item[optionDisabled]" border>{{ item[optionKeyValue[0]] }}</el-radio>
    </el-radio-group>
  </el-form-item>
</template>

<script>
import { mixin } from './mixin'

export default {
  name: 'RadioGroup',
  mixins: [mixin],
  model: {
    prop: 'value',
    event: 'changeModel'
  },
  props: {
    value: null,
    disabled: Boolean,

    options: Array,
    optionKeyValue: {
      type: Array,
      default: () => { return ['label', 'value'] }
    },
    optionDisabled: {
      type: String,
      default: 'disabled'
    }
  },
  computed: {
    text: {
      get() {
        return this.value || null
      },
      set(val) {
        this.$emit('changeModel', val)
      }
    }
  }
}
</script>
